<template>
	<t-dialog :visible="visible" :close-on-overlay-click="false" :header="isEdit ? '编辑库存' : '新建库存'" :width="640"
		:footer="false" @close="onClose">
		<template #body>
			<div class="add-refinery-form">
				<t-form ref="form" :data="formData" :rules="rules" label-width="80px">
					<t-form-item label="总库存" name="stock">
						<t-input v-model="formData.stock" type='number' placeholder="请输入总库存" />
					</t-form-item>

				</t-form>

				<div class="form-footer">
					<t-button theme="primary" @click="onSubmit">确定</t-button>
				</div>
			</div>
		</template>
	</t-dialog>
</template>

<script lang="ts">
	import { ref, reactive, defineComponent, watch, onMounted } from 'vue';
	import { getTjylOilTypeList } from '@/api/common.ts'

	// 导出为默认组件
	const AddRefineryDialog = defineComponent({
		name: 'AddRefineryDialog',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			editData: {
				type: Object,
				default: () => ({})
			}
		},
		emits: ['close', 'submit'],
		setup(props, { emit }) {
			const form = ref();
			const formData = reactive({
				id: '',
				stock: '',
			});

			const rules = {
			};
			
			onMounted(() => {
				// 模拟数据，实际项目中应该从API获取
			});
			
			const oilTypeList = ref([]);
			const oilShow = ref(false)


			// 监听编辑数据，填充表单
			watch(() => props.editData, (newData) => {
				if (props.isEdit && newData && Object.keys(newData).length > 0) {
					fillFormData(newData);
				}
			}, { immediate: true, deep: true });

			// 监听弹窗显示状态
			watch(() => props.visible, (visible) => {
				if (visible && props.isEdit && props.editData) {
					fillFormData(props.editData);
				} else if (visible && !props.isEdit) {
					resetForm();
				}
			});

			// 填充表单数据
			const fillFormData = (data : any) => {
				formData.id = data.id || '';
				formData.stock = data.stock || '';

				// 清空之前的库存映射
				formData.stockMap = {};

				// 设置库存数据
				if (data.currentOil) {
					formData.stockMap[data.currentOil] = data.totalStock?.replace('KG', '') || '';
				}
			};

			const onClose = () => {
				emit('close');
			};

			const onSubmit = async () => {
				const valid = await form.value?.validate?.();
				if (valid === true) {
					// 将数据整理为提交格式
					const submitData = {
						id: formData.id,
						stock: formData.stock
					};

					emit('submit', submitData);
					if (!props.isEdit) {
						// 如果是新增，则重置表单
						resetForm();
					}
				}
			};

			const resetForm = () => {
				formData.id = '';
				formData.name = '';
				formData.address = '';
				formData.stockMap = {};
				form.value?.reset?.();
			};

			return {
				form,
				formData,
				rules,
				onClose,
				onSubmit
			};
		}
	});

	export default AddRefineryDialog;
</script>

<style lang="less" scoped>
	.add-refinery-form {
		padding: 8px;

		.divider {
			height: 1px;
			background-color: #eee;
			margin: 16px 0;
		}

		.oil-types {
			margin: 24px 0;
		}

		.mt-16 {
			margin-top: 16px;
		}

		.form-footer {
			display: flex;
			justify-content: center;
			margin-top: 32px;
		}
	}
</style>